<!DOCTYPE html>
<!--
Tests the string displayed when a File created using the File constructor is
used in the FileList of a <input type="file"> element. To run this test
manually, drag the black box over the input field.

Expectation: the file name displayed by the <input> UI should be hello.txt. The
renderer should not crash after the name shows up.
-->

<style>
html {
  font: 10px Ahem;
  -webkit-font-smoothing: none;
}
#dragSource {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  color: black;
  margin-bottom: 50px;
}
#inputElement {
  width: 100px;
  height: 100px;
}
</style>

<div id="dragSource" draggable="true"
     title="Drag this box onto the file input below">
</div>

<form action="#">
    <p>
        <input id="fileInput" type="file" />
    </p>
</form>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

// FIXME: dragging will become unnecessary if/when we implement a FileList constructor
var dragSource = document.getElementById('dragSource');
var inputElement = document.getElementById('fileInput');

var outputFileList = null;
dragSource.addEventListener('dragstart', function (event) {
    var testFile = new File(['Hello world!'], 'hello.txt');
    console.log(event.dataTransfer);
    event.dataTransfer.effectAllowed = 'copy';
    event.dataTransfer.items.add(testFile);
    outputFileList = event.dataTransfer.files;
});

inputElement.addEventListener('dragenter', function (event) {
    event.preventDefault();
});
inputElement.addEventListener('dragover', function (event) {
    event.preventDefault();
});
inputElement.addEventListener('drop', function (event) {
    event.target.files = outputFileList;
    if (window.testRunner)
        testRunner.notifyDone();
});

function dragSourceToInput() {
    var startX = dragSource.offsetLeft + dragSource.offsetWidth / 2;
    var startY = dragSource.offsetTop + dragSource.offsetHeight / 2;
    var targetX = inputElement.offsetLeft + inputElement.offsetWidth / 2;
    var targetY = inputElement.offsetTop + inputElement.offsetHeight / 2;

    if (window.eventSender) {
        eventSender.dragMode = true;
        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.leapForward(250);
        eventSender.mouseMoveTo(targetX, targetY);
        eventSender.mouseUp();
    }
}
dragSourceToInput();
</script>
